<template>
  <qx-table :data="tableData" :option="tableOption"
            class="no-shadow no-padding bg-transparent non-margin-top q-mt-sm"></qx-table>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { postAPI } from 'src/api/index.js'
import { computed, onMounted, ref } from 'vue'

const tableData = ref([])
const tableOption = computed(() => {
  return {
    page: false, index: false,
    column: [{
      label: `${i18n.t('AGVCore.AGVBrand')}`, field: 'agvBrandCode', minWidth: 60
    }, {
      label: `${i18n.t('AGVCore.AGVCode')}`, field: 'agvCode', minWidth: 60
    }, {
      label: `${i18n.t('AGVCore.AlarmCode')}`, field: 'originalWarnCode', minWidth: 60
    }, {
      label: `${i18n.t('AGVCore.AlarmPoint')}`, field: 'warnStartPoint', minWidth: 60,
      format: val => `${(val || '').replace(',', ',\n')}`
    }, {
      label: `${i18n.t('AGVCore.AlarmDescription')}`, field: 'originalWarnDesc', minWidth: 80
    }, {
      label: `${i18n.t('AGVCore.AlarmTime')}`, field: 'collectDateStr', minWidth: 60,
      format: val => `${(val || '').replace(' ', '\n')}`
    }]
  }
})

const initData = () => {
  postAPI('/yfagv/api/agvWarnHis/selectAgvWarnHis', { nonLoadingBar: true }, data => {
    tableData.value = data
  }, () => {
    tableData.value = []
  })
}
onMounted(initData)
</script>